<form {{action (queue (action "preSave" model) (perform save model)) on="submit"}}>
  <MessageError @model={{model}} data-test-edit-form-error /> <div class="box is-sideless is-fullwidth is-marginless">
    <NamespaceReminder @mode="save" />
    {{#if (eq @mode "create")}}
      <FormField
        data-test-field
        @attr={{hash name="name" type="string"}}
        @model={{model}}
      />
    {{/if}}
    <div class="control is-flex box is-shadowless is-fullwidth is-marginless">
      <input
        data-test-input="operationNone"
        id="operationNone"
        type="checkbox"
        class="switch is-rounded is-success is-small"
        checked={{not this.model.operationNone}}
        onchange={{action "toggleOperationSpecial" value="target.checked"}}
      />
      <label for="operationNone">
        Allow this role to perform KMIP operations
      </label>
    </div>
    {{#if (not this.model.operationNone) }}
      <Toolbar>
        <h3 class="kmip-allowed-operations-header">
          Allowed Operations
        </h3>
      </Toolbar>
      <div class="box">
        <FormField
          @attr={{hash name="operationAll" type="boolean" options=(hash label="Allow this role to perform all operations")}}
          @model={{this.model}}
        />
        <hr />
        <div class="is-flex">
          <div class="kmip-role-allowed-operations">
            {{#each-in this.model.operationFormFields.firstObject as |groupName fieldsInGroup|}}
              <h4 class="title is-7">{{groupName}}</h4>
              {{#each fieldsInGroup as |attr|}}
                <FormField
                  data-test-field
                  @disabled={{or this.model.operationNone this.model.operationAll}}
                  @attr={{attr}}
                  @model={{compute (action "placeholderOrModel") this.model.operationAll attr}}
                  @showHelpText={{false}}
                />
              {{/each}}
            {{/each-in}}
          </div>
          <div class="kmip-role-allowed-operations">
            {{#each (drop 1 (or this.model.operationFormFields (array))) as |group|}}
              <div class="kmip-role-allowed-operations">
                {{#each-in group as |groupName fieldsInGroup|}}
                  <h4 class="title is-7">{{groupName}}</h4>
                  {{#each fieldsInGroup as |attr|}}
                    <FormField
                      data-test-field
                      @disabled={{or this.model.operationNone this.model.operationAll}}
                      @attr={{attr}}
                      @model={{compute (action "placeholderOrModel") this.model.operationAll attr}}
                      @showHelpText={{false}}
                    />
                  {{/each}}
                {{/each-in}}
              </div>
            {{/each}}
          </div>
        </div>
      </div>
    {{/if}}
    <div class="box is-fullwidth is-shadowless">
      <h3 class="title is-3">
        TLS
      </h3>
      {{#each this.model.tlsFormFields as |attr|}}
        <FormField
          data-test-field
          @attr={{attr}}
          @model={{model}}
        />
      {{/each}}
    </div>
    {{#each this.model.fields as |attr|}}
      <FormField
        data-test-field
        @attr={{attr}}
        @model={{model}}
      />
    {{/each}}
  </div>
  <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
    <div class="field is-grouped">
      <div class="control">
        <button type="submit" data-test-edit-form-submit class="button is-primary {{if save.isRunning 'loading'}}" disabled={{save.isRunning}}>
          {{saveButtonText}}
        </button>
      </div>
      {{#if cancelLinkParams}}
        <div class="control">
          {{#link-to params=cancelLinkParams class="button" data-test-edit-form-cancel="true"}}
            Cancel
          {{/link-to}}
        </div>
      {{/if}}
    </div>
  </div>
</form>
